<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX插值表达式</title>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			// 1、函数式组件
			// 函数式组件，没有状态数据，没有生命周期管理
			// 一般主要用于数据|结构的渲染展示
			let remark = "函数式组件主要用于数据|结构渲染展示"
			function Home() {
				return <div>
							<h2>函数式组件</h2>
							{/* 
							函数内部展示全局变量/局部变量
							但是不能当成状态数据使用 
							默认情况下无法完成数据更新和渲染的同步
							*/}
							<p>描述: { remark }</p>
						</div>
			}
			
			
			// 2、类组件
			// 类组件，包含自己的状态数据、包含完整生命周期
			class ClsHome extends React.Component {
				
				// 声明状态数据（位置1）
				// state = {
				// 	name: "大牧",
				// 	age: 22
				// }
				
				constructor() {
					super()
					// 声明状态数据(位置2)
					this.state = {
						name: "大牧",
						age: 22
					}
				}
				
				render() {
					return <div>
								<h2>类组件</h2>
								{/* 类组件包含自己的状态数据管理 */}
								<p>姓名: { this.state.name }</p>
								<p>年龄: {this.state.age }</p>
							</div>
				}
			}
			
			
			// JSX输出
			let div = <div>
							<Home></Home>
							<hr/>
							<ClsHome></ClsHome>
						</div>
			
			// 渲染展示
			ReactDOM.render(div, document.querySelector("#app"))
		</script>
	</body>
</html>